<template>
	<view :style="themeColor()">
		<view class="w-[100vw] min-h-[100vh] bg-[#f8f8f8]" v-if="!loading && isVerify">
			<view class="w-full bg-[#fff] verify-box h-[760rpx]">
				<view class="text-[var(--primary-color)] fixed top-[40rpx] right-[30rpx] flex items-center"
					@click="redirect({ url: '/app/pages/verify/record' })">
					<text class="nc-iconfont nc-icon-lishijiluV6xx !text-[28rpx] -mb-[2rpx]"></text>
					<text class="text-[26rpx] ml-[8rpx]">核销记录</text>
				</view>
				<view v-show="operationType == 'sweepCode'" class="flex flex-col items-center justify-center">
					<view class="sweep-code flex items-center justify-center" @click="scanCode">
						<image class="w-[354rpx] h-[354rpx]" :src="img('static/resource/images/verify/saoma.png')" />
					</view>
					<view class="mt-[40rpx] text-[30rpx]">点击扫描二维码</view>
					<view class="mt-[20rpx] text-[var(--text-color-light9)] text-[26rpx] font-400 pb-[142rpx]">扫描二维码进行核销</view>
				</view>

				<view v-show="operationType == 'manualInput'">
					<view class="flex pt-[126rpx] items-center justify-center">
						<view class="flex justify-center items-center flex-col pr-[30rpx] min-w-[130rpx]">
							<image class="w-[100rpx] h-[100rpx]" :src="img('static/resource/images/verify/shuruhexiaoma.png')" />
							<view class="text-[26rpx] h-[36rpx] leading-[36rpx] mt-[14rpx]">验证核销码</view>
						</view>
						<image class="w-[74rpx] h-[12rpx] mb-[50rpx]" :src="img('static/resource/images/verify/youjiantou.png')" />
						<view class="flex justify-center items-center flex-col pl-[30rpx] min-w-[130rpx]">
							<image class="w-[100rpx] h-[100rpx]" :src="img('static/resource/images/verify/hexiao1.png')" />
							<view class="text-[26rpx] h-[36rpx] leading-[36rpx] mt-[14rpx]">核销</view>
						</view>
					</view>
					<view class="mt-[50rpx]">
						<view
							class="h-[90rpx] border-[2rpx] border-solid border-[#eee] rounded-[16rpx] box-border p-[20rpx] mx-[60rpx] flex items-center">
							<text class="nc-iconfont nc-icon-saotiaoxingmaV6xx text-[44rpx] text-[#EF000C]"></text>
							<input type="text" placeholder="请输入核销码"
								class="h-[90rpx] border-none text-start ml-[30rpx] text-[28rpx] flex-1" placeholder-class="_placeholder"
								v-model="verify_code" :focus="isFocus" ref="input" />
						</view>
						<view
							class="h-[80rpx] primary-btn-bg min-w-[630rpx] text-[#fff] flex-center !text-[26rpx] save-btn rounded-[100rpx] h-[80rpx] font-500 mx-[60rpx] mt-[146rpx] relative z-1"
							@click="confirm">核销</view>
					</view>
				</view>
			</view>

			<view
				class="w-[630rpx] h-[100rpx] bg-[#fff] mx-[auto] mt-[220rpx] rounded-[90rpx] flex relative action-type-wrap">
				<view
					class="relative w-[51%] pr-[50rpx] box-border rounded-[50rpx] z-0 flex flex-col items-center justify-center"
					@click="changeOperationType('sweepCode')" :class="{ 'xuanZhong1': operationType == 'sweepCode' }">
					<text class="nc-iconfont nc-icon-saoyisaoV6xx !text-[40rpx]"></text>
					<view class="text-[24rpx] leading-[1] mt-[10rpx]">扫码核销</view>
				</view>
				<view
					class="flex flex-col items-center flex-col w-[120rpx] h-[120rpx] bg-[#FF7354] rounded-[50%] absolute top-[-10rpx] left-[255rpx] heXiao text-white z-10 shrink-0">
					<view
						class="nc-iconfont nc-icon-saotiaoxingmaV6xx ns-gradient-otherpages-member-balance-balance-rechange !text-[44rpx] mt-[19rpx]">
					</view>
					<view class="text-[24rpx] mt-[8rpx] leading-[34rpx] h-[34rpx]">核销台</view>
				</view>
				<view
					class="relative w-[51%] pl-[50rpx] box-border rounded-[50rpx] z-0 flex flex-col items-center justify-center"
					:class="{ 'xuanZhong': operationType == 'manualInput' }" @click="changeOperationType('manualInput')">
					<text class="iconfont iconVector-77 !text-[40rpx]"></text>
					<view class="ml-[20rpx] text-[24rpx] leading-[1] mt-[10rpx]" @click="focus">手动输入</view>
				</view>
			</view>

			<!-- #ifdef MP-WEIXIN -->
			<!-- 小程序隐私协议 -->
			<privacy-popup ref="privacyPopup"></privacy-popup>
			<!-- #endif -->
		</view>
		<view class="w-[100vw] min-h-[100vh] bg-[#f8f8f8] overflow-hidden" v-if="!loading && !isVerify">
			<view class="empty-page">
				<image class="img" :src="img('static/resource/images/system/empty.png')" mode="aspectFit" />
				<view class="desc">非核销员无此权限</view>
			</view>
		</view>
		<loading-page :loading="loading"></loading-page>
	</view>
	<!-- 水印 -->
	<watermark></watermark>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { img, redirect, isWeixinBrowser, getToken } from '@/utils/common';
import { onShow } from '@dcloudio/uni-app'
import { getVerifierInfo, getCheckVerifier } from '@/app/api/verify'
import { t } from '@/locale'
import wechat from '@/utils/wechat'

const operationType = ref('manualInput'); //类型
// #ifdef H5
operationType.value = 'manualInput';
// #endif
// #ifndef H5
operationType.value = 'sweepCode';
// #endif

const isFocus = ref(false)
const verify_code = ref('');
const loading = ref(false)
const isVerify = ref(true)
onShow(() => {
	// if (getToken()) checkIsVerifier();
})

// 检测是否是核销员
const checkIsVerifier = () => {
	getCheckVerifier().then((res: any) => {
		if (!res.data) {
			isVerify.value = false
			loading.value = false;
			// uni.showToast({
			// 	title: '非核销员无此权限',
			// 	icon: 'none'
			// });
			// setTimeout(() => {
			// 	if(getCurrentPages().length > 1){
			//         uni.navigateBack({
			//             delta: 1
			//         });
			//     }else{
			//         redirect({
			//             url: '/app/pages/member/index',
			//             mode: 'reLaunch'
			//         });
			//     }
			// }, 1000);
		} else {
			isVerify.value = true
			loading.value = false;
		}
	})
}

const scanCode = () => {
	// #ifdef MP
	uni.scanCode({
		onlyFromCamera: true,
		success: res => {
			if (res.errMsg == 'scanCode:ok') {
				let code = res.result;
				redirect({ url: '/app/pages/verify/verify', param: { code } })
			} else {
				uni.showToast({
					title: res.errorMsg,
					icon: 'none'
				});
			}
		}
	});
	// #endif

	// #ifdef H5
	if (isWeixinBrowser()) {
		wechat.init();
		wechat.scanQRCode(res => {
			if (res.resultStr) {
				let code = res.resultStr;
				redirect({ url: '/app/pages/verify/verify', param: { code } })
			}
		});
	}
	// #endif
}

let isLoading = false;
const confirm = () => {
	var reg = /[\S]+/;
	if (!reg.test(verify_code.value)) {
		uni.showToast({
			title: '请输入核销码',
			icon: 'none'
		});
		return false;
	}

	if (isLoading) return false;
	isLoading = true;

	getVerifierInfo({ pickUpVerifyCode: verify_code.value }).then((res: any) => {
		isLoading = false;
		redirect({ url: '/app/pages/verify/verify', param: { code: verify_code.value } })
	}).catch(() => {
		isLoading = false;
	})
}

const focus = () => {
	isFocus.value = !isFocus.value;
}

const changeOperationType = (type: string) => {
	// #ifdef H5
	if (type == 'sweepCode' && !isWeixinBrowser()) {
		uni.showToast({
			title: 'H5端不支持扫码核销',
			icon: 'none'
		});
		return;
	}
	// #endif
	operationType.value = type;
}
</script>
<style lang="scss" scoped>
.action-type-wrap {
	box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.03), 0 4px 2px 0 rgba(0, 0, 0, 0.04);
}

.heXiao {
	background: linear-gradient(180deg, #FF7354 0%, #FF020F 100%), #EF000C;
}

.xuanZhong {
	background: linear-gradient(270deg, #FFD1D1 0%, rgba(255, 209, 209, 0.1) 100%), #FFFFFF;
	color: #EF000C;
}

.xuanZhong1 {
	background: linear-gradient(90deg, #FFD1D1 0%, rgba(255, 209, 209, 0.1) 100%), #FFFFFF;
	color: #EF000C;
}

.sweep-code {
	width: 354rpx;
	height: 354rpx;
	box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.03), 0 6px 3px 0 rgba(0, 0, 0, 0.02);
	border-radius: 50%;
	margin-top: 146rpx;
}

.verify-box {
	border-bottom-left-radius: 400rpx 60rpx;
	border-bottom-right-radius: 400rpx 60rpx;
}

._placeholder {
	color: var(--text-color-light9);
	font-size: 28rpx;
}
</style>
